<!--添加房源页面-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加租客</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: #f4f4f4;
        }
        .container {
            max-width: 100%;
            margin: 10px;
            padding: 20px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label {
            font-size: 21px !important; /* 设置文本大小，不加!important手机端不生效*/
            margin: 5px 0; /* 添加外边距 */
            display: block; /* 每个 label 独占一行 */
            width: 100%; /* 设置宽度 */
        }
        input[type="text"]{
            width: 100%; /* 宽度占满容器 */
            padding: 8px; /* 内部空间 */
            font-size: 14px; /* 文本大小 */
            border: 1px solid #ccc; /* 边框大小和样式 */
            box-sizing: border-box; /* 边框和内边距包含在宽度内 */
            margin-bottom: 20px;
        }
        input[type="date"]{
            width: 100%; /* 宽度占满容器 */
            padding: 8px; /* 内部空间 */
            font-size: 14px; /* 文本大小 */
            border: 1px solid #ccc; /* 边框大小和样式 */
            box-sizing: border-box; /* 边框和内边距包含在宽度内 */
            margin-bottom: 20px;
        }
        input[type="number"]{
            width: 100%; /* 宽度占满容器 */
            padding: 8px; /* 内部空间 */
            font-size: 14px; /* 文本大小 */
            border: 1px solid #ccc; /* 边框大小和样式 */
            box-sizing: border-box; /* 边框和内边距包含在宽度内 */
        }
        select {
            width: 100%;
            padding: 12px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; /* Ensures padding doesn't affect the width */
        }

        /* 为特定选项设置颜色 不生效*/
        select option[value="已收租"] {
            color: red !important; /* 选项1的颜色 */
        }
        select option[value="未收租"] {
            color: yellow !important; /* 选项2的颜色 */
        }

        button {
            width: 100%;
            padding: 10px;
            margin-top: 20px;
            background: #5cb85c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 18px;
        }
        button:hover {
            background: #4cae4c;
        }
        /* Responsive design for smaller screens */
        @media (max-width: 600px) {
            .container {
                margin: 5px;
                padding: 10px;
            }
            label {
                font-size: 14px;
            }
            button {
                font-size: 16px;
            }
        }

        h1 {
          color: #333;
          margin-bottom: 20px;
          text-align: center;
        }

        #hidden-input {
            display: none; /* 隐藏输入框 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>修改租客信息</h1>
<!--        <form action="/wx/new" method="post">-->
        <form id="HouseForm">
            <input type="number" id="hidden-input" name="index" value={{index}} >
            <label for="address">地址:</label>
            <input type="text" id="address" name="address" value={{address}} required>

            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" value={{name}} required>

            <label for="moveInDate">入住时间:</label>
            <input type="date" id="moveInDate" name="moveInDate" value={{date}}>

            <label for="phone">电话:</label>
            <input type="text" id="phone" name="phone" value={{phone}} required>

            <label for="rent">租金:</label>
            <input type="text" id="rent" name="rent" value={{price}} required>

            <label for="rent_status">收租状态:</label>
            <select id="rent_status" required>
                <option value="已收租">已收租</option>
                <option value="未收租">未收租</option>
            </select>

            <label for="note">备注:</label>
            <textarea id="note" name="rent" rows="4" cols="50">{{note}}</textarea><br>

<!--            <label for="state">State:</label>-->
<!--            <select id="state" name="state">-->
<!--                <option value="AL">Alabama</option>-->
<!--                &lt;!&ndash; Add other states here &ndash;&gt;-->
<!--            </select>-->

<!--            <label for="zip">Zip:</label>-->
<!--            <input type="text" id="zip" name="zip" required>-->

            <!-- Add more fields as needed -->
            <div>
                <h1 id = "result"></h1>
            </div> <!-- 这个元素将显示后端的响应 -->

            <button type="submit">修改</button>
        </form>
    </div>


    <script>
        document.getElementById('HouseForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const data = {
                index: document.getElementById('hidden-input').value,
                address: document.getElementById('address').value,
                name: document.getElementById('name').value,
                date: document.getElementById('moveInDate').value,
                phone_num: document.getElementById('phone').value,
                rent: document.getElementById('rent').value,
                rent_status: document.getElementById('rent_status').value,
                note: document.getElementById('note').value
            };
            fetch('/wx/modify', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => displayData(data))
            .catch(error => console.error('Error:', error));
        });

        function displayData(data) {
            // 检查 data 中的特定字段或值，并根据它们显示不同信息
            if (data.result === 1) {
                // 如果状态是成功，显示成功信息
                // document.getElementById('result').innerText = `已添加 ${data.address} ${data.room_num} 间房！`;
                window.location.href = '/wx/success.html';
            } else if (data.result === 2) {
                // 如果状态是错误，显示错误信息
                window.location.href = '/wx/fail.html';
            } else {
                // 其他情况，显示默认信息
                h1 = document.getElementById('result')
                h1.innerText = data.description;
                // 为 h1 元素设置样式，将其标红
                h1.style.color = 'red'; // 直接在元素上设置样式
            }
            // 如果有其他数据需要显示，可以在这里添加更多逻辑// 例如，显示一个列表或更新其他元素的内容
        }


        // 设置默认值为“未收租”
        document.getElementById("rent_status").value = "{{rent_status}}";

    </script>
</body>
</html>